<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8" />
    <title>Loading - Standalone</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <link href="../../../../../css/core.css" rel="stylesheet" />
    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
    <script src="../../../../../scripts/testing/scripts.js"></script>
    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
  </head>
  <script type="module">
    import { loadingController } from '../../../../dist/ionic/index.esm.js';
    window.loadingController = loadingController;
  </script>
  <body>
    <button id="basic-loading" onclick="openLoading({ message: 'Hellooo', duration: 5000 })">Show Loading</button>
    <button
      id="long-content-loading"
      onclick="openLoading({duration: 2000, content: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea voluptatibus quibusdam eum nihil optio, ullam accusamus magni, nobis suscipit reprehenderit, sequi quam amet impedit. Accusamus dolorem voluptates laborum dolor obcaecati.'})"
    >
      Show Loading with long content
    </button>
    <button
      id="no-spinner-loading"
      onclick="openLoading({duration: 2000, content: 'Loading Please Wait...', spinner: null})"
    >
      Show Loading with no spinner
    </button>
    <button
      id="translucent-loading"
      onclick="openLoading({duration: 5000, content: 'Loading Please Wait...', translucent: true})"
    >
      Show Loading with translucent
    </button>
    <button
      id="custom-class-loading"
      onclick="openLoading({duration: 5000, content: 'Loading Please Wait...', translucent: true, cssClass: 'custom-class custom-loading'})"
    >
      Show Loading with cssClass
    </button>

    <style>
      body > button {
        display: block;
        clear: both;
        width: 100%;
        padding: 12px 8px;
        font-size: 1em;
        background: #f8f8f8;
        border: 1px solid #eee;
        border-radius: 4px;
        margin-bottom: 8px;
      }
    </style>

    <script>
      async function openLoading(opts) {
        const loading = await loadingController.create(opts);
        await loading.present();
      }
    </script>
  </body>
</html>
